import styles from "./index.less"
import {useEffect,useState} from "react"
import { ScrollBoard  } from '@jiaminghi/data-view-react'
const Intercept=()=>{
    function getRandomDate() {
        let now = new Date();
        let maxDiff = 2 * 24 * 60 * 60 * 1000; // 最大时间间隔为2天
        let diff = Math.floor(Math.random() * maxDiff); // 随机生成时间间隔
        let randomDate = new Date(now.getTime() - diff); // 计算随机时间
        let year = randomDate.getFullYear();
        let month = randomDate.getMonth() + 1;
        let day = randomDate.getDate();
        let hour = randomDate.getHours();
        let minute = randomDate.getMinutes();
        let second = randomDate.getSeconds();
        // 格式化时间
        return (
            year +
            "/" +
            (month < 10 ? "0" + month : month) +
            "/" +
            (day < 10 ? "0" + day : day) +
            " " +
            (hour < 10 ? "0" + hour : hour) +
            ":" +
            (minute < 10 ? "0" + minute : minute) +
            ":" +
            (second < 10 ? "0" + second : second)
        );
    }

    const ipArr=[
        '47.108.170.128',
        '47.109.51.105',
        '47.108.73.254',
        '47.108.170.128',
        '47.108.170.128',
        '47.109.51.105',
        '47.109.51.105',
        '47.108.73.254',
        '39.108.77.91',
        '39.108.77.91',
        '47.108.170.128',
        '47.108.24.2',
        '47.108.24.2',
        '47.108.170.128',
        '39.108.77.91',
        '47.108.24.2']
    const typeArr=["SQL注入","XXE","XSS","XXE","表达式注入","恶意Attach","恶意Beans绑定","恶意DNS查询","恶意反射调用","恶意类加载","恶意外连","恶意文件读写","恶意文件上传","反序列化攻击","命令执行","目录遍历","内存马注入","任意文件删除","任意文件读取"]
  const number=Math.random()*10
    const data=[]
    ipArr.forEach(item=>{
        data.push(['<div class="out"><div class="round"></div></div>',item,typeArr[Math.floor(Math.random()*16)],getRandomDate(),number>8?'拦截失败，触发安全事件':'拦截成功'])
    })
    console.log(data)

    const config={
        data:data,
        // data:[
        //     ['<div class="out"><div class="round"></div></div>','资产名称资产','攻击类型攻击...', '2022/08/18  12:30:23', '拦截情况情况...'],
        //     ['<div class="out"><div class="round"></div></div>','资产名称资产','攻击类型攻击...', '2022/08/18  12:30:23', '拦截情况情况...'],
        //     ['<div class="out"><div class="round"></div></div>','资产名称资产','攻击类型攻击...', '2022/08/18  12:30:23', '拦截情况情况...'],
        //     ['<div class="out"><div class="round"></div></div>','资产名称资产','攻击类型攻击...', '2022/08/18  12:30:23', '拦截情况情况...'],
        //     ['<div class="out"><div class="round"></div></div>','资产名称资产','攻击类型攻击...', '2022/08/18  12:30:23', '拦截情况情况...'],
        //     ['<div class="out"><div class="round"></div></div>','资产名称资产','攻击类型攻击...', '2022/08/18  12:30:23', '拦截情况情况...'],
        //     ['<div class="out"><div class="round"></div></div>','资产名称资产','攻击类型攻击...', '2022/08/18  12:30:23', '拦截情况情况...'],
        //     ['<div class="out"><div class="round"></div></div>','资产名称资产','攻击类型攻击...', '2022/08/18  12:30:23', '拦截情况情况...'],
        //     ['<div class="out"><div class="round"></div></div>','资产名称资产','攻击类型攻击...', '2022/08/18  12:30:23', '拦截情况情况...'],
        //     ['<div class="out"><div class="round"></div></div>','资产名称资产','攻击类型攻击...', '2022/08/18  12:30:23', '拦截情况情况...'],
        //     ['<div class="out"><div class="round"></div></div>','资产名称资产','攻击类型攻击...', '2022/08/18  12:30:23', '拦截情况情况...'],
        //     ['<div class="out"><div class="round"></div></div>','资产名称资产','攻击类型攻击...', '2022/08/18  12:30:23', '拦截情况情况...'],
        //     ['<div class="out"><div class="round"></div></div>','资产名称资产','攻击类型攻击...', '2022/08/18  12:30:23', '拦截情况情况...'],
        //     ['<div class="out"><div class="round"></div></div>','资产名称资产','攻击类型攻击...', '2022/08/18  12:30:23', '拦截情况情况...'],
        //     ['<div class="out"><div class="round"></div></div>','资产名称资产','攻击类型攻击...', '2022/08/18  12:30:23', '拦截情况情况...'],
        //     ['<div class="out"><div class="round"></div></div>','资产名称资产','攻击类型攻击...', '2022/08/18  12:30:23', '拦截情况情况...'],
        //     ['<div class="out"><div class="round"></div></div>','资产名称资产','攻击类型攻击...', '2022/08/18  12:30:23', '拦截情况情况...'],
        //     ['<div class="out"><div class="round"></div></div>','资产名称资产','攻击类型攻击...', '2022/08/18  12:30:23', '拦截情况情况...'],
        //     ['<div class="out"><div class="round"></div></div>','资产名称资产','攻击类型攻击...', '2022/08/18  12:30:23', '拦截情况情况...'],
        //     ['<div class="out"><div class="round"></div></div>','资产名称资产','攻击类型攻击...', '2022/08/18  12:30:23', '拦截情况情况...'],
        //     ['<div class="out"><div class="round"></div></div>','资产名称资产','攻击类型攻击...', '2022/08/18  12:30:23', '拦截情况情况...'],
        //
        //
        //
        // ],
        oddRowBGC:'rgba(255, 255, 255, 0.15)',
        evenRowBGC:'rgba(255, 255, 255, 0)',
        columnWidth:[50,180,200,250,200],
        rowNum:6,

    }


    return(
        <div className={styles.container}>

          <div className={styles.top}>
              <div className={styles.EnTitle}>Real-time interception</div>
              <div className={styles.ChTitle}>实时拦截情况</div>
          </div>
           <div className={styles.table}>
               <ScrollBoard config={config} className={styles.excel}/>
               {/*<div className={styles.box}>*/}
               {/*{*/}
               {/*    tableState.map((item,index)=>{*/}
               {/*        return(*/}
               {/*            <div className={styles.wap} key={index}>*/}
               {/*                <div className={styles.column_01}></div>*/}
               {/*                <div className={styles.column_02}>{item.name+index}</div>*/}
               {/*                <div className={styles.column_03}>{item.type}</div>*/}
               {/*                <div className={styles.column_04}>{item.time}</div>*/}
               {/*                <div className={styles.column_05}>{item.case}</div>*/}
               {/*            </div>*/}
               {/*        )*/}
               {/*    })*/}
               {/*}*/}
               {/*</div>*/}
           </div>
        </div>
    )
}
export default Intercept